import React, { useEffect, useState, useRef } from 'react';
import { useDispatch, connect } from 'umi';
import { Card, ConfigProvider, Table, Collapse, Form, Button } from 'antd';
import { ColumnsType, SorterResult } from 'antd/es/table';
import { ProForm, ProFormText, ProFormSelect } from '@ant-design/pro-form';
import zhCN from 'antd/lib/locale/zh_CN';
import { FormInstance } from 'antd/lib/form';

const { Panel } = Collapse;

/*表格数据*/
interface StudentListType {
  studentName: string;
  studentCode: string;
  classLabel: string;
  year: string;
  majorLabel: string;
  mentorName: string;
  overallGrade: string;
  rank: string;
}
const columns: ColumnsType<StudentListType> = [
  {
    title: '序号',
    dataIndex: 'order',
    align: 'center',
  },
  {
    title: '姓名',
    dataIndex: 'studentName',
    align: 'center',
  },
  {
    title: '学号',
    dataIndex: 'studentCode',
    align: 'center',
  },
  {
    title: '班级',
    dataIndex: 'classLabel',
    align: 'center',
  },
  {
    title: '年级',
    dataIndex: 'year',
    align: 'center',
  },
  {
    title: '专业',
    dataIndex: 'majorLabel',
    align: 'center',
  },
  {
    title: '班导师',
    dataIndex: 'mentorName',
    align: 'center',
  },
  {
    title: '总成绩',
    dataIndex: 'overallGrade',
    align: 'center',
  },
  {
    title: '专业排名',
    dataIndex: 'rank',
    sorter: (a, b) => a.rank - b.rank,
    align: 'center',
  },
];

const StudentTableList = () => {
  const dispatch = useDispatch();
  const formRef = useRef<FormInstance>(null);
  const [result, setResult] = useState([]);
  const [initialData, setInitialData] = useState<Array<StudentListType>>([]); // 保存初始数据

  useEffect(() => {
    dispatch({
      type: 'Model_StudentAnalysisStudentModel/getOutclassSummaryEffects',
      payload: {
        callback: (value: any) => {
          setResult(value);
          setInitialData(value); // 保存初始数据
        },
      },
    });
  }, []);

  const handleChange: TableProps<StudentListType>['onChange'] = (
    pagination,
    filters,
    sorter,
  ) => {
    // 处理筛选逻辑
  };

  //筛选
  const searchOnFinish = async (values: any) => {
    // 获取表单值
    let studentName = values.studentName;
    let studentCode = values.studentCode;
    let classLabel = values.classLabel;
    let year = values.year;
    let majorLabel = values.majorLabel;
    let mentorName = values.mentorName;
    let overallGrade = values.overallGrade;
    let rank = values.rank;

    // 过滤逻辑
    let filteredData = result.filter((item: StudentListType) => {
      if (studentName && !item.studentName.includes(studentName)) {
        return false;
      }
      if (studentCode && !item.studentCode.includes(studentCode)) {
        return false;
      }
      if (
        classLabel &&
        item.classLabel &&
        !item.classLabel.includes(classLabel)
      ) {
        return false;
      }
      if (year && !item.year.includes(year)) {
        return false;
      }
      if (majorLabel && !item.majorLabel.includes(majorLabel)) {
        return false;
      }
      if (
        mentorName &&
        item.mentorName &&
        !item.mentorName.includes(mentorName)
      ) {
        //mentor可能为空，需要提前判断
        return false;
      }
      if (overallGrade && !item.overallGrade.includes(overallGrade)) {
        return false;
      }
      if (rank && !item.rank.includes(rank)) {
        return false;
      }
      return true;
    });

    // 更新结果
    setResult(filteredData);
  };

  //重置
  const handleReset = () => {
    formRef.current?.resetFields();
    setResult(initialData); // 重置为初始数据
  };
  return (
    <ConfigProvider locale={zhCN}>
      {/* 搜索区 */}
      <Card
        title={
          <span style={{ fontWeight: 'bold', fontSize: 18 }}>
            全部第二课堂列表
          </span>
        }
      >
        <ProForm
          layout="inline"
          onFinish={searchOnFinish}
          onReset={handleReset}
        >
          <ProFormText
            label="姓名"
            name="studentName"
            placeholder="请输入学生姓名"
            width={160}
          />
          <ProFormText
            label="班级"
            name="classLabel"
            placeholder="请输入班级"
            width={160}
          />
          <ProFormText
            label="年级"
            name="year"
            placeholder="请输入年级"
            width={160}
          />
          <ProFormText
            label="专业"
            name="majorLabel"
            placeholder="请输入专业"
            width={180}
          />
          <ProFormText
            label="班导师"
            name="mentorName"
            placeholder="请输入导师姓名"
            width={160}
          />
        </ProForm>
      </Card>
      {/* 信息展示区 */}
      <Card>
        <Table columns={columns} dataSource={result} onChange={handleChange} />
      </Card>
    </ConfigProvider>
  );
};

export default connect(({ Model_StudentAnalysisStudentModel }: any) => ({
  Model_StudentAnalysisStudentModel,
}))(StudentTableList);
